<template>
  <s-page custom-class="DateTimePicker-Page">
    <view class="container">
      <c-demo-block title="基础用法">
        <s-button block @click="dateVisible = true">{{ date }}</s-button>
      </c-demo-block>

      <c-demo-block title="选择年">
        <s-button block @click="yearVisible = true">{{ year }}</s-button>
      </c-demo-block>

      <c-demo-block title="选择月">
        <s-button block @click="monthVisible = true">{{ month }}</s-button>
      </c-demo-block>

      <c-demo-block title="选择时间">
        <s-button block @click="timeVisible = true">{{ time }}</s-button>
      </c-demo-block>

      <c-demo-block title="选择日期时间">
        <s-button block @click="datetimeVisible = true">{{ datetime }}</s-button>
      </c-demo-block>

      <c-demo-block title="过滤时间">
        <s-button block @click="filterTimeVisible = true">{{ filterTime }}</s-button>
      </c-demo-block>

      <c-demo-block title="自定义实现日期区间选择">
        <s-button block @click="onRangeBtnClick">{{ startDate }} ~ {{ endDate }}</s-button>
      </c-demo-block>
    </view>

    <!-- 日期选择 -->
    <s-date-time-picker v-model="date" :visible.sync="dateVisible" @confirm="onConfirm" />

    <!-- 选择年 -->
    <s-date-time-picker v-model="year" type="year" :visible.sync="yearVisible" @confirm="onConfirm" />

    <!-- 选择月 -->
    <s-date-time-picker v-model="month" type="month" :visible.sync="monthVisible" @confirm="onConfirm" />

    <!-- 选择时间 -->
    <s-date-time-picker v-model="time" type="time" :visible.sync="timeVisible" @confirm="onConfirm" />

    <!-- 选择日期时间 -->
    <s-date-time-picker v-model="datetime" type="datetime" :visible.sync="datetimeVisible" @confirm="onConfirm" />

    <!-- 过滤时间 -->
    <s-date-time-picker
      v-model="filterTime"
      type="time"
      :visible.sync="filterTimeVisible"
      :filter="filter"
      @confirm="onConfirm"
    />

    <!-- 自定义实现日期区间选择 -->
    <s-date-time-picker
      :value="dateRange[0]"
      title="开始日期"
      :visible.sync="startDateVisible"
      @confirm="onStartDateConfirm"
    />
    <s-date-time-picker
      :value="dateRange[1]"
      title="结束日期"
      :visible.sync="endDateVisible"
      :start="dateRange[0]"
      @confirm="onEndDateConfirm"
    />
  </s-page>
</template>

<script>
import { formatDate } from '@/utils';
export default {
  data: () => ({
    date: formatDate(new Date(), 'YYYY-MM-DD'),
    dateVisible: false,

    year: formatDate(new Date(), 'YYYY'),
    yearVisible: false,

    month: formatDate(new Date(), 'YYYY-MM'),
    monthVisible: false,

    time: formatDate(new Date(), 'HH:mm'),
    timeVisible: false,

    datetime: formatDate(new Date(), 'YYYY-MM-DD HH:mm'),
    datetimeVisible: false,

    filterTime: formatDate(new Date(), 'HH:00'),
    filterTimeVisible: false,

    dateRange: [],
    startDate: formatDate(new Date(), 'YYYY-MM-DD'),
    startDateVisible: false,
    endDate: formatDate(Date.now() + 24 * 3600 * 1000, 'YYYY-MM-DD'),
    endDateVisible: false,
  }),
  onLoad(options) {
    this.dateRange = [this.startDate, this.endDate];
  },
  methods: {
    filter({ name, list }) {
      if (name === 'minute') {
        return list.filter(item => ['00', '10', '20', '30', '40', '50'].includes(item.value));
      }
      return list;
    },
    onConfirm(e) {
      console.log(e);
    },
    onRangeBtnClick() {
      this.dateRange = [this.startDate, this.endDate];
      this.startDateVisible = true;
    },
    onStartDateConfirm({ value }) {
      this.dateRange[0] = value;
      this.endDateVisible = true;
    },
    onEndDateConfirm({ value }) {
      this.dateRange[1] = value;
      this.startDate = this.dateRange[0];
      this.endDate = this.dateRange[1];
    },
  },
};
</script>

<style lang="scss">
.DateTimePicker-Page {
  .container {
    padding: 0 $padding-md;
  }
}
</style>
